import Vue from 'vue'
// 1.引入路由
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import indexPage from "@/views/indexPage.vue";
import brandManagement from "@/views/brandManagement.vue";
import keyboardModifiers from "@/views/keyboardModifiers.vue";
import filterPage from "@/views/filterPage.vue";
import lifeCycle from "@/views/lifeCycle.vue";
import animatePage from "@/views/animatePage.vue";
import customDirectives from "@/views/customDirectives.vue";
import axiosPage from "@/views/axiosPage.vue";
import fatherPage from "@/views/fatherPage.vue";
import courseIndex from "@/views/course/courseIndex.vue";
import minePage from "@/layout/minePage.vue";
import antPage from "@/views/antPage.vue";
import pageA from "@/views/pageA.vue";
import pageB from "@/views/pageB.vue";
import personalCenter from "@/views/personalCenter.vue";
import calculateTheListener from "@/views/calculateTheListener.vue";
import shoppingCart from "@/views/shoppingCart.vue";
import vueX from "@/views/vueX.vue"; //自动导入

Vue.use(VueRouter)
//3.创建映射关系
const routes = [
    // 路由重定向
    // {
    //     path: '',
    //     redirect: '/father'
    // },
    {
        path: '/', //路径 名字可以自定义
        // name: 'home',//路由名字
        component: HomeView //component 组件
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
    {
        path: '/index',
        component: indexPage
    },
    {
        path: '/brand',
        component: brandManagement
    },
    {
        path: '/key',
        component: keyboardModifiers
    },
    {
        path: '/filter',
        component: filterPage,
        // 路由嵌套
        children: [
            {
                // 在路由嵌套的子路由中不带 /
                path: 'animate',
                component: animatePage,
                children: [
                    {
                        path: 'father',
                        component: fatherPage
                    }
                ]
            },
            {
                path: 'course',
                // component: courseIndex
                // 视图命名
                components: {
                    default: courseIndex,
                    keyboardModifiers,
                    brandManagement
                }
            }
        ]
    },
    {
        path: '/directive',
        component: customDirectives
    },
    {
        path: '/life',
        component: lifeCycle
    },
    {
        path: '/animate',
        component: animatePage
    },
    {
        path: '/api',
        component: axiosPage
    },
    {
        path: '/father',
        component: fatherPage
    },
    {
        path: '/course',
        component: courseIndex
    },
    {
        path: '/mine',
        component: minePage,
        children: [
            {
                path: 'course',
                component: courseIndex
            }, {
                path: 'brand',
                component: brandManagement
            }
        ]
    },
    {
        path: '/pageA',
        component: pageA
    },
    {
        path: '/pageB/:id',
        // path:'/pageB/:sex/:num',
        name: 'pageB',
        // path:'/pageB',
        component: pageB
    },
    {
        path: '/ant',
        component: antPage
    },
    {
        path: '/person',
        component: personalCenter
    },
    {
        path: '/cw',
        component: calculateTheListener
    },
    {
        path: '/car',
        component: shoppingCart
    },
    {
        path: '/vueX',
        component: vueX
    }
]
// 2.创建路由实例
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
    // routes:routes
    // 高亮自定义类名
    linkActiveClass: 'activeLink',
})

export default router
